<template>
    <div class="admin">
        <el-header>
            <span class="title">地大坤迪门户网站后台管理系统</span>
        </el-header>
        <el-container>

            <el-aside
                width="200px"
                style="backgroundColor: #ffffff; margin-right: 10px;"
            >
                <el-image
                    :src="logo"
                    fit="fill"
                ></el-image>
                <el-menu
                    class="el-menu-vertical-demo"
                    :unique-opened="true"
                    background-color="#000000"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :collapse-transition="false"
                >
                    <span
                        v-for="(item, index) in menus"
                        :key="item.name"
                    >
                        <el-submenu
                            v-if="item.isLeaf == 0"
                            :index="item.name"
                        >
                            <template slot="title">
                                <i :class="item.icon"></i>
                                {{item.name}}</template>
                            <el-menu-item
                                v-for="sub in item.sub"
                                :key="sub.name"
                                @click="toRoute(sub.route, item.name, sub.name)"
                            >{{sub.name }}</el-menu-item>
                        </el-submenu>
                        <el-menu-item
                            @click="toRoute(item.route, item.name)"
                            v-else
                        >
                            <i :class="item.icon"></i>
                            {{item.name}}</el-menu-item>
                    </span>

                </el-menu>
            </el-aside>
            <el-main>
                <!-- 面包屑，展示当前页面所在位置 -->
                <el-breadcrumb
                    separator-class="el-icon-arrow-right"
                    style="margin-top: 20px; margin-bottom: 20px;"
                >
                    <el-breadcrumb-item
                        v-for="item in breadcrumbs"
                        :key="item.name"
                    >{{item.name}}</el-breadcrumb-item>
                </el-breadcrumb>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menus: [
                {
                    name: "公司动态",
                    isLeaf: 0,
                    icon: "el-icon-s-home",
                    sub: [
                        { name: "新增动态", isLeaf: 1, route: "/addDynamic" },
                        { name: "查看动态", isLeaf: 1, route: "/dynamicList" }
                    ]
                },
                {
                    name: "个人中心",
                    isLeaf: 0,
                    icon: "el-icon-s-custom",
                    sub: [
                        { name: "修改密码", isLeaf: 1, route: "/editPassword" }
                    ]
                },
                {
                    name: "合作案例",
                    isLeaf: 0,
                    icon: "el-icon-s-promotion",
                    sub: [
                        { name: "成功案例", isLeaf: 1, route: "/success" },
                        { name: "合作单位", isLeaf: 1, route: "/unit" }
                    ]
                },
                {
                    name: "产品中心",
                    isLeaf: 1,
                    icon: "el-icon-star-on",
                    route: "/product"
                },
                {
                    name: "行业资讯",
                    isLeaf: 1,
                    icon: "el-icon-s-comment",
                    route: "/industry"
                },
                {
                    name: "关于坤迪",
                    isLeaf: 0,
                    icon: "el-icon-question",
                    sub: [
                        { name: "公司简介", isLeaf: 1, route: "/introduction" },
                        { name: "专家团队", isLeaf: 1, route: "/team" }
                    ]
                },
                {
                    name: "退出",
                    isLeaf: 1,
                    icon: "el-icon-circle-close",
                    route: "/index"
                }
            ],
            breadcrumbs: [],
            logo: require("@/assets/images/logo-blue.jpg")
        };
    },
    methods: {
        toRoute(route, name1, name2) {
            this.$router.push(route).catch(err => err);
            this.getBreadcrum([name1, name2]);
        },

        getBreadcrum(options) {
            this.breadcrumbs = [];
            for (var i = 0; i < options.length; i++) {
                var obj = { name: options[i] };
                this.breadcrumbs.push(obj);
            }
        }
    },
    mounted() {
        this.toRoute(this.$store.state.adminRouter);
    }
};
</script>

<style>
.admin .el-header {
    height: 100px;
    background-color: #29a176;
    text-align: center;
}
.admin .el-header .title {
    font-family: "黑体";
    color: #ffffff;
    font-size: 26px;
    line-height: 52px;
}
</style>